<template>
  <div class="map-container">
    <l-map
      ref="map"
      class="map"
      :zoom="zoom"
      :maxZoom="maxZoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <!-- 1图层控制器
          collapsed:false 展开图层控制器；默认true：收缩图层控制器
      -->
      <l-control-layers position="topright" :collapsed="false"></l-control-layers>
      <!-- 1.1基础图层 -->
      <l-tile-layer
        v-for="tile in tileProviders"
        ref="baseLayer"
        :key="tile.name"
        :name="tile.name"
        :visible="tile.visible"
        :url="tile.url"
        :attribution="tile.attribution"
        :options="tile.options"
        layer-type="base"
      />
       <!-- 自定义control内容 -->
      <l-control position="bottomleft">
        <div style="background:white;">
          <el-alert :title="geoMessage" type="error" :closable="false"></el-alert>
        </div>
      </l-control>

      <!-- 1.3覆盖图层 -->
      <l-layer-group layer-type="overlay" name="<span style='color: red'>区域图</span>">    
        <l-geo-json ref="geo" :geojson="geojson.data" :options="geojson.options" :optionsStyle="getStyle" ></l-geo-json>

      </l-layer-group>
      
    </l-map>
  </div>
</template>
<script>
import {
  LMap,
  LControl,
  LTileLayer,
  LControlLayers,
  LLayerGroup,
  LCircle,
  LGeoJson
} from 'vue2-leaflet'
import chinaJson from './data/china.json'

export default {
  name: 'MapGeojson',
  data() {
    

    return {
      zoom: 4,
      maxZoom: 16,
      center: [39.907103, 116.396885],
      // 可选的底图
      tileProviders: [
        {
          name: '高德',
          visible: true,
          url:
            'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德'
        },
        {
          name: '高德卫星',
          visible: false,
          url:
            'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德卫星'
        },
        {
          name: '离线地图',
          visible: false,
          url: 'http://10.121.132.187:8001/map/simple/{z}/{x}/{y}.png',

          attribution: '离线地图'
        }
      ],
      geojson:{
        data: chinaJson ,
        options: {
          onEachFeature: this.onEachFeature
        }
      },
      current:null 
      
    }
  },
  components: {
    LMap,
    LControl,
    LTileLayer,
    LControlLayers,
    LLayerGroup,
    LCircle,
    LGeoJson
  },
  computed:{
    geoMessage(){
      return this.current ? ('adcode：'+this.current.adcode +'，name：'+this.current.name+'，地市数：'+this.current.childrenNum):'' ;
    }
  },
  methods: {
    zoomUpdated(zoom) {
      console.log('zoomUpdated=' + zoom)
      //1-12级显示heat
      this.showHeat = zoom <= 12
    },
    centerUpdated(center) {
      console.log('centerUpdated=' + center)
    },
    boundsUpdated(bounds) {
      console.log('boundsUpdated=' + bounds)
    },
    // geo样式
    getStyle(feature) {
      return {
        fillColor: this.getColor(feature.properties.childrenNum),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
      }
    },
    // 动态颜色
    getColor(value) {
      return value > 23
        ? '#800026'
        : value > 20
        ? '#BD0026'
        : value > 18
        ? '#E31A1C'
        : value > 15
        ? '#FC4E2A'
        : value > 12
        ? '#FD8D3C'
        : value > 10
        ? '#FEB24C'
        : value > 5
        ? '#FED976'
        : '#FFEDA0'
    },
    // 为所有layer添加事件
    onEachFeature(feature, layer) {
      //  var onMouseover = this.onMouseover
      //  var onMouseout = this.onMouseout
      //  var onClick = this.onClick
      console.log('-------------onEachFeature------------')
      layer.on({
        // 鼠标焦点时，高亮显示
        mouseover: this.onMouseover,
        // 鼠标移开时，重置样式
        mouseout: this.onMouseout,
        // 点击时，自动放大地图
        click: this.onClick
      })
    },
    // 自动放大地图，适配图层
    onClick(e) {
      this.$refs.map.mapObject.fitBounds(e.target.getBounds())
    },
    // 高亮
    onMouseover(e) {
      console.log('------mouseover-----------')
      var layer = e.target
      layer.setStyle({
        weight: 1,
        color: '#ff0000',
        dashArray: '',
        fillOpacity: 0.7
      })

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront()
      }
      // 从layer中获取属性信息，并更新信息显示块
      // info.update(layer.feature.properties)
      var props = layer.feature.properties
      this.current = {
        adcode: props.adcode,
        name: props.name,
        childrenNum: props.childrenNum
      }
    },

    // 重置高亮
    onMouseout(e) {
      console.log('------mouseout-----------')
      this.$refs.geo.mapObject.resetStyle(e.target)
      // info.update()
    }
  },
  mounted() {
    this.$nextTick(() => {})
  },
  beforeDestroy() {
    this.$refs.map.mapObject.remove()
  }
}
</script>
